<template>
  <section class="inConbox clearfix order_assistant">
    <!-- 头部 -->
		<Nav :URL="urls.url" :text="urls.text"></Nav>
    <!-- 支付金额 -->
    <div class="assis_pay_box wid_pad_lf dip ju_al_lf">
      <span class="assis_money_top">支付金额：</span>
      <span class="assis_money">¥ {{paymoney}}.00</span>
    </div>
    <!-- 支付方式 -->
    <div class="money_balance_padfr">
      <div class="money_balance_box money_balance_padfrf dip ju_al_bet" v-for="(itemsf,index) in  moneybalance" :key="index" @click="addactiveIMG(index,moneybalance)" v-if="itemsf.ifblock">
        <span class="money_logoIMg" >
          <img :src="'./static/images/Order/'+itemsf.logoUrl+''" alt="">
        </span>
        <span class="money_txet dip ju_al_lf">
          <i>{{itemsf.text}}</i>
          <i class="money_txet_child" v-if="itemsf.block">（可用余额：<em>￥{{blan.balance}}</em>）</i>
        </span>
        <span class="money_activeIMg">
          <img :src="'./static/images/Order/'+itemsf.activeIMg+''" alt="" v-if="itemsf.ind">
          <img :src="'./static/images/Order/'+itemsf.activeIMgnone+''" alt="" v-else>
        </span>
      </div>
    </div>
    <!--点击支付 -->
    <button class="Verifif_btn" :class="{'Verifi_btn_active':this.btnAcetive}" @click="getPostRuter()">立即支付</button>
    <!-- 余额弹出框 -->
		<div class="orderDetilserror" v-if="this.yueblock">
			<div class="dipW ju_al orderDetilserror_child">
				<span class="ODS_fiast dipW ju_al">
					<em>您的账户余额不足</em>
					<em>是否需要充值?</em>
				</span>
				<span class="dip ju_al ODS_last bg_li">
					<em class="ODS_em1" @click="wechetRecharge()">取消</em>
					<em class="ODS_em2" @click="AddwechetRecharge()">立即充值</em>
				</span>
			</div>
		</div>
  </section>
</template>
<script>
import Nav from '../mallConent/mallTopNav'
export default {
  data(){
    return{
      urls:{
        url:'',
        text:'订单信息',
      },
      OPIND:'',
      paymoney:300,//支付余额
      moneybalance:[
        {
          logoUrl:'Order_yue.png',
          text:'余额支付',
          ind:true, //变换背景
          block:true, //显示额
          ifblock:true, //这是显示微信点击的事件,
          activeIMg:'Order_moyactive.png',
          activeIMgnone:'ORder_cool.png',
          moneybalanceS:'balancePayment'
        }
        ,{
          logoUrl:'Order_wechet.png',
          text:'微信支付',
          ind:false,
          block:false,
          ifblock:true,
          activeIMg:'Order_moyactive.png',
          activeIMgnone:'ORder_cool.png',
          moneybalanceS:'WeChatPayment'
        }
      ],
      blan:'', //获取现金
      btnAcetive:false, //改变状态
      yueblock:false, //显示余额框
      moneybalanceS:'', //获取支付方式
    }
  },
  components:{Nav}, //引入组件
  methods:{
    addactiveIMG(index,typr){ //支付方式点击事件
      if(typr.length >=2){
        for(var i = 0;i<typr.length;i++){
          typr[i].ind = false;
        }
        typr[index].ind = true;
        this.moneybalanceS = typr[index].moneybalanceS
      }
    },
    wechetRecharge(){ //点击取消
			this.yueblock = false;
		},
    AddwechetRecharge(){  //充值
			var _this = this
			var t;
			// clearTimeout(t)	
			this.$router.push({
				path:'/bomNav/userRecharge/1'//要去的路由充值
			})
			// alert('刚充值成功')
			// t = setTimeout(function(){
				_this.yueblock = false;	
			// },1000)
    },
    getblan(){ //显示余额
      this.OPIND = sessionStorage.getItem('openId')
      // this.blan = JSON.parse(sessionStorage.getItem('balance'))
      for(var i = 0;i<this.moneybalance.length;i++){
        if(this.moneybalance[i].ind == true){
           this.moneybalanceS = this.moneybalance[i].moneybalanceS //初始化的支付方式
        }
      }
      this.axios.post(this.$busPoat.userInfo(),{}).then(response=>{
          // sessionStorage.setItem('balance',JSON.stringify(response.data))
          console.log(response.data)
          this.blan = response.data
          this.$store.dispatch('showuserifonS')
          // console.log(JSON.parse(sessionStorage.getItem('balance')))   
          //loingdong      
        }).catch(error=>{
          alert('获取用户信息失败')
          console.log(error)
        })
    },
    onBridgeReady(resf){
			WeixinJSBridge.invoke(
				'getBrandWCPayRequest',{
					"appId":resf.data.unifiedOrd.appId,     //公众号名称，由商户传入     
					"timeStamp":resf.data.unifiedOrd.timeStamp,     ////       //时间戳，自1970年以来的秒数    
					"nonceStr":resf.data.unifiedOrd.nonceStr, //随机串     
					"package":resf.data.unifiedOrd.package,     
					"signType":"MD5",      ///    //微信签名方式：     
					"paySign":resf.data.unifiedOrd.sign //微信签名 
				},
				// console.log(gf)
				function(res){     
					if(res.err_msg == "get_brand_wcpay_request:ok" ) {
              this.$router.push({
                path:'/bomNav/Ordershuo/assisaccess'
              })
					} // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
				}
			); 
		},
    getPostRuter(){ //点击提交
      if(this.moneybalanceS == 'balancePayment'){
        if(this.paymoney > this.blan.balance){
          	this.yueblock = true;
        }else {
          this.$store.dispatch('showloader') 
          this.yueblock = false;
          this.axios.post(this.$busPoat.posit(),
          {
            "orderAmount":this.paymoney
          }).then(resf =>{
            var st;
            clearTimeout(st)
            st = setTimeout(() =>{
              if(resf!= null || resf != undefined){
                this.$store.dispatch('hideloader')    
                if(resf.data.iplancode == 200 || resf.data.iplancode == 104){
                  //跳到认证成功页
                  this.$router.push({
                    path:'/bomNav/Ordershuo/assisaccess'
                  })
                  //logoding 结束
                }else if(resf.data.iplancode == 106){
                  alert(resf.data.msg)
                  //提示用户
                }else if(resf.data.iplancode == 107){
                  alert(resf.data.msg)
                  //跳到未支付页
                  //logoding 结束
                }else if(resf.data.iplancode == 105){
                  this.yueblock = true //余额不足
                }
            }else{
                this.$store.dispatch('hideloader')              
                alert('请求加载过慢...')
              }
              clearTimeout(st)                                                                       
            },2000)
          }).catch(error=>{
            alert('支付失败')
          })
        }
      }else if(this.moneybalanceS == 'WeChatPayment'){
          this.axios.post(this.$busPoat.recharge(),{
            "rechargeAmount":this.paymoney,
            "rechargeType":"2",
            "openid":this.OPIND
          }).then(resf =>{
            if(resf.data.iplancode == 200){
              if(typeof WeixinJSBridge == "undefined"){
                if(document.addEventListener){
                  document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
                }else if (document.attachEvent){
                  document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
                  document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
                }
              }else{
                this.onBridgeReady(resf);
              }
            }else if(resf.data.iplancode == 104){
              this.$router.push({
                path:'/bomNav/Ordershuo/assisaccess'
              })
            }else if(resf.data.iplancode == 106){
              alert(resf.data.msg)
              //提示用户
            }else if(resf.data.iplancode == 102){
              alert(resf.data.msg)
              //提示用户
            }
          }).catch(error=>{
            alert('支付失败')
          })
        
      }

    }
  },
  created(){
    this.getblan()
    // console.log(JSON.parse(sessionStorage.getItem('balance')))
  }
}
</script>
<style lang="scss" scoped>
.order_assistant{
  margin: 0rem;
  z-index: 51;
  height: 100%;
  // background: #fff;
  background: #f2f2f2;
  position: fixed;
  // position: relative;
}
.assis_pay_box{
  margin-top:.8rem;
  margin-bottom:.1rem;
  width: 100%;
  background: #fff;  
  height: 0.86rem;
  font-weight: 600;
  .assis_money_top{
    color:#333;
    font-size: .24rem;
  }
  .assis_money{
    font-size: .3rem;
    color:#FF7200;
    font-family: 'arial'
  }
}
.money_balance_padfr{
  padding:0rem .4rem;
  width: 100%;
  background: #fff;  
  height: 2.05rem;
}
.money_balance_padfrf{
  &:last-child{
    border-bottom:0;
  }
}
.money_balance_box{
  height: 49.8%;
  border-bottom:.02rem solid #f2f2f2;
  position: relative;
  img{
    width: 100%;
    height: 100%;
  }
  .money_logoIMg{
    width: 8%;
    height: 43%;
    margin-left:6%;
  }
  .money_txet{
    font-size: .28rem;
    color:#666;
    width: 81%;
    height: 52%;
    font-weight: 600;
    padding-left:2%;
    .text_acirve{
      color:#C6C6C6;
    }
    .money_txet_child{
      // width: 70%;
      font-size: .24rem;
      color:#666666;
      em{
        color:#FF7200;
      }
    }
  }
  .money_activeIMg{
    width: 7%;
    height: 43%;
    margin-right:6%;
  }
}
.Verifif_btn{
  width: 100%;
  position: fixed;
  left:0rem;
  bottom:0rem;
  height: 1rem;
  background: #FF7200;
  text-align: center;
  line-height: 1rem;
  color:#fff;
  font-size: .3rem;
}
.Verifi_btn_active{
  background: #e56600;
}
//显示余额
.orderDetilserror{
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: rgba(0,0,0,.4);
  z-index: 60;
  .orderDetilserror_child{
		border:0;
    width: 70%;
    // height: 22%;
    background: rgba(255,255,255,1);
    position: relative;
    top:50%;
    left:50%;
		-webkit-transform: translateX(-50%) translateY(-50%);
		-moz-transform: translateX(-50%) translateY(-50%);
		-ms-transform: translateX(-50%) translateY(-50%);
		-o-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
    span{
			width: 100%;
      font-size: .28rem;
      color:#666666;
			text-align: center;
			font-family: 'MicrosoftYaHei';
    }
    .ODS_fiast{
      height: 1.8rem;
      padding:9% 25%;
			// line-height: .4rem;
			font-weight: 600;
    }
    .ODS_last{
      // background-image: url('../../../static/images/Order/order_yue_img.png');
      // background-repeat: no-repeat;
      // background-size: 100%;
			// height: .8rem;
      border:0;
      padding:5% 0rem;
      em{
        width: 50%;
        height: 100%;
				font-weight: 600;
				color:#FFFFFF;
				// background: #ff6f00;
        // line-height: .8rem;
      }
      .ODS_em2{
				border-left:.02rem solid #FF7200;
      }
    }
  }
}
</style>
